import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import fetch from 'isomorphic-fetch';
import Topic from './../topic/Topic';
import Api from './../Api';

class Controller extends Component {

    constructor(props) {
        super(props);
        this.state = {
            topics: []
        };
    }

    componentDidMount() {
        fetch(Api.getTopics())
            .then(response=>(response.json()))
            .then((json)=> {
                this.setState({
                    topics: json.data
                })
            });
    }

    handleClick(topic) {
        this.props.history.push("/topic/" + topic.id, {topic: topic});
    }

    render() {
        var that = this;
        var components = this.state.topics.map(function (topic, index) {
            return <Topic key={"topic_" + index} onClick={(topic)=>{
                that.handleClick(topic);
            }} topic={topic}/>;
        });
        return <ul>{components}</ul>;
    }
}

export default Controller;


